<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Book Search with AJAX and Servlet</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #searchForm {
            margin-bottom: 20px;
        }

        #searchInput {
            padding: 8px;
            width: 300px;
        }

        #searchButton {
            padding: 8px 16px;
        }

        #resultContainer {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 200px;
        }
    </style>
</head>

<body>
<h1>Book Search</h1>
<form id="searchForm" onsubmit="return false;"> <!-- 阻止表单默认提交行为 -->
    <label for="searchInput"></label><input type="text" id="searchInput" placeholder="Enter book keyword">
    <button type="button" id="searchButton">Search</button>
</form>
<div id="resultContainer"></div>

<script>
    // 获取搜索按钮元素
    const searchButton = document.getElementById('searchButton');
    // 获取搜索输入框元素
    const searchInput = document.getElementById('searchInput');
    // 获取结果容器元素
    const resultContainer = document.getElementById('resultContainer');

    // 为搜索按钮添加点击事件监听器
    searchButton.addEventListener('click', handleSearch);

    // 为输入框添加keydown事件监听器，用于监听回车键
    searchInput.addEventListener('keydown', function (event) {
        if (event.keyCode === 13) {
            event.preventDefault(); // 阻止回车键的默认行为，比如表单提交等
            event.stopPropagation(); // 阻止事件冒泡，避免其他父级元素的事件处理干扰
            handleSearch();
        }
    });

    function handleSearch() {
        // 获取搜索关键词
        const keyword = searchInput.value.trim();
        if (keyword === "") {
            return; // 如果关键词为空，直接返回不发起请求
        }

        // 先清空结果容器（确保之前的结果被清除干净）
        resultContainer.innerHTML = "";

        // 创建 XMLHttpRequest 对象
        const xhr = new XMLHttpRequest();

        // 设置请求完成时的回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 解析服务器返回的JSON数据
                const books = JSON.parse(xhr.responseText);

                // 遍历书籍数据并创建HTML元素展示在页面上
                books.forEach(book => {
                    const bookDiv = document.createElement('div');
                    bookDiv.innerHTML = `<h3>${book.title}</h3><p>Author: ${book.author}</p>`;
                    resultContainer.appendChild(bookDiv);
                });
            }
        };

        // 打开一个GET请求到指定的Servlet路径，传递关键词参数
        xhr.open('GET', `http://localhost:8080/BookSearch/BookSearchServlet?keyword=${keyword}`, true);

        // 发送请求
        xhr.send();
    }

</script>
</body>

</html>